import { defineComponent, ref } from 'vue'
import { ElTableColumn, ElAvatar, ElIcon, ElImage, ElRate, ElSwitch, ElTag, ElTable,  } from 'element-plus'
import { timeFormat, timeAgo, timeRemaining } from '@/util/common'
import * as Icons from '@element-plus/icons-vue';
import qaTableColumn from './qa-table-column';
export default defineComponent({
  name: 'qaTableDetail',
  components: {
    qaTableColumn, // 必须注册组件
  },
  props: {
    column: {
      type: Object as PropType<Object>,
    },
    value: {
      type: [String, Number, Boolean, Object, Array, Function, Symbol] as PropType<any>, // 更显式地表示 any
    },
    row: {
      type: Object as PropType<Object>,
    },
    formatter: {
      type: Function as PropType<Function>,
    },
    index: {
      type: Number as PropType<number>,
    },
    imageWidth: {
      type: Number as PropType<number>,
      default: 40
    },
    type:{
      type: String as PropType<string>,
      default: 'text'
    }

  },
  setup(props) {
    const {  imageWidth } = props;
    const render = (data: any, type: string, row: any, column: any, $index: any) => {
      if (data === undefined || data === null) {
        if (column?.defaultValue === undefined || column?.defaultValue === null) {
          data = null
        } else {
          data = column.defaultValue
        }
      }
      let context: any;
      if (props.formatter) {
        data = props.formatter(data, row, column, $index)
      }

      if (type === 'text') {
        context = <span>{data}</span>
      }

      if (type === 'avatar') {
        context = <ElAvatar size={imageWidth} src={data} />
      }

      if (type === 'image') {
        context = <ElImage src={data} preview-src-list={[data]} style={{ width: imageWidth + 'px' }} preview-teleported={true} />
      }

      if (type === 'rate') {
        context = <ElRate v-model={data} disabled />
      }

      if (type === 'switch') {
        context = <ElSwitch v-model={data} disabled />
      }

      if (type === 'icon') {
        let IconComponent;
        if (column.data) {
          const findItem = column.data.find((item: any) => item.value === data)
          if (findItem && Object.prototype.hasOwnProperty.call(Icons, findItem.icon)) {
            IconComponent = (Icons as Record<string, any>)[findItem.icon]
            context = <ElIcon>
              <IconComponent />
            </ElIcon>
          } else {
            context = <span>{data}</span>
          }

        }

        if (!column.data) {
          if (Object.prototype.hasOwnProperty.call(Icons, data)) {
            IconComponent = (Icons as Record<string, any>)[data];
            context = <ElIcon>
              <IconComponent />
            </ElIcon>
          } else {
            context = <span>{data}</span>
          }
        }
      }

      if (type === 'tag') {

        if (column.data) {
          const findItem = column.data.find((item: any) => item.value === data)
          if (findItem) {
            context = <ElTag type={findItem.tagType}>{findItem.label}</ElTag>
          } else {
            context = <span>{data}</span>
          }
        }
      }


      if (type === 'time') {
        data = timeFormat(data, column.valueFormat)
        context = <span>{data}</span>
      }

      if (type === 'dateDiff') {
        data = timeAgo(data)
        context = <span>{data}</span>
      }

      if (type === 'dateDiff2') {
        data = timeRemaining(data, column.endText)
        context = <span>{data}</span>
      }

      if (type === 'html') {
        context = <div innerHTML={data} />
      }

      if (type === 'money') {
        context = <span>
          {data ? (data * 100).toFixed(2) : '0.00'}
        </span>
      }

      if (type === 'percentage') {
        context = <span>
          {data ? (data * 100).toFixed(2) + '%' : 0}
        </span>
      }

      if (type === 'link') {
        context = <a href={data} target="_blank">{data}</a>
      }

      if (type === 'group') {
        context = (
          <div class="flex flex-col gap-2">
            {row.columns.map((item: any) => (
              <div key={item.key} class="flex items-center lh-[23px]">
                <span class="flex-shrink-0">{item.title}：</span>
                <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{render(row.row[item.key], item.type || 'text', column.columns, item, $index)}</span>
              </div>
            ))}
          </div>
        );
      }

      if (type === 'object') {
        if (data && Object.keys(data).length > 0) {
          const tableDatas = Object.keys(data).map((item) => {
            return {
              title: [item],
              value: data[item]
            }
          })

          context = <ElTable data={tableDatas} show-header={false} border>
            <ElTableColumn prop="title" />
            <ElTableColumn prop="value" />
          </ElTable>
        }
      }

      if (type === 'table') {
        if (data && data.length > 0 ) {
          context = <ElTable data={data} border>
            {row.columns.map((item: any) => {
              return <qaTableColumn prop={item.key} label={item.title} type={item.type} width={item.width} align={item.align} sortable={item.sortable} />
            })}
          </ElTable>
        }
        // context = JSON.stringify(row.columns)
      }

      if (type === 'radio') {
        const findObjet = column.data.find((item: any) => {
          return item.value === data
        })
        context = <span>{findObjet?.label}</span>
      }

      if (type === 'json') {
        data &&= context = <div style="overflow-x:scroll"><pre class="bg-[#f6f8fa]" style={{textAlign:'initial'}}>{JSON.stringify(data, null, 2)}</pre></div>
      }

      console.log('context',context)
      return context
    }



    return () =>  render( props.value , props.type , props.row, props.column, props.index)
  },
})
